//这是第一层路由 需要放在顶层中 即app.js当中

//引入router组件 
import { Route, Redirect, HashRouter, Switch } from "react-router-dom";
//在react中引入Suspense、lazy组件 做路由懒加载
import { Suspense, lazy } from "react";
//引入index组件
let Index = lazy(() => import("../view/index/index.jsx"));
let Routes = () => (
    <HashRouter>
        {/* 注意：在使用懒加载时 Suspense必须包裹Switch组件，且suspense必须存在fallback */}
        <Suspense fallback={()=>(<div>loading...</div>)}>
            <Switch>
                {/* 路由重定向、当是根路径时，跳转到index */}
                {/* 注意：exact是精确匹配、通常只在路由选择模糊时使用：比如："/","/login"不使用exact只会匹配到"/" */}
                {/* 如果有子路由、则不能使用exact，比如 "/user","/user/list",使用exact会匹配不到"/user/list" */}
                <Route exact path="/" render={() => (<Redirect to="/index" />)}></Route>
                <Route path="/index" component={Index}></Route>
            </Switch>
        </Suspense>

    </HashRouter>
)

// 暴露routes
export default Routes;
